<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- HTML 页面手机适配方法 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Vue 3 One 实例</title>
</head>
<body>
<!--页面布局-->
<!--<div id="app1">-->
<!--    <app-nav></app-nav>-->
<!--    <app-view>-->
<!--        <app-sidebar></app-sidebar>-->
<!--        <app-content></app-content>-->
<!--    </app-view>-->
<!--</div>-->

<div id="app">

    <p>{{ message.a }}</p>

</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    /*
        Vue的基本使用步骤
        1、需要提供标签用于填充数据
        2、引入vue.js文件
        3、可以使用vue的语法做功能了
        4、把vue提供的数据填充到标签里面
     */

    // 我们的数据对象
    var message = { a: 1 }

    var app = new Vue({

        el: '#app',
        data: {
            message
        },
        template: {

        },
        created: function () {
            // `this` 指向 vm 实例
            console.log('a is: ' + this.a)
        },
        methods: {

        }
    })

    // 设置 property 也会影响到原始数据
    message.a = 10

</script>

</body>
</html>
